import React from 'react'
import '../css/about.css'
import Event from '../index/Event'

class About extends React.Component{

    constructor(props){
        super();
        this.state={
            list:[],
            num1:[]
            
        }
    }

    componentWillMount(){
        // 写在constructor中
        Event.addListener('add',(todolist)=>{
            this.state.list.push(todolist)
            this.setState(
                {
                    list:this.state.list
                }
                )

                // console.log(this.state.list);

        })
       
    }


    render(){
        return(
            <div>
                <h3 className="zzjx">正在进行{this.state.cp1}</h3>
                {
                    this.state.list.map((c,i)=>{
                        if(c.fel==false){
                          

                            return  <div key={i} className="list">
                            <input  type="checkbox" checked={c.fel}  onClick={()=>{
                                this.state.list[i].fel=!this.state.list[i].fel
                                this.setState({
                                   list:this.state.list
                               })
                            }}/>
                            <p >{c.name}</p>
                            <button onClick={
                                ()=>{
                                    this.state.list.splice(i,1)
                                    this.setState({
                                        list:this.state.list
                                    })
                                }
                            }>X</button>
                            </div>
                        }
                    })
                }
                <h3 className="zzjx">已完成</h3>

                {
                    this.state.list.map((c,i)=>{
                        if(c.fel==true){
                            return  <div key={i} className="list">
                            <input  type="checkbox" checked={c.fel}  onClick={()=>{
                                this.state.list[i].fel=!this.state.list[i].fel
                                this.setState({
                                   list:this.state.list
                               })
                            }}/>
                            <p>{c.name}</p>
                            <button onClick={
                                ()=>{
                                    this.state.list.splice(i,1)
                                    this.setState({
                                        list:this.state.list
                                    })
                                }
                            }>X</button>
                            </div>
                        }
                      
                        
                        
                    })



                    


                }

                
               


   <div className="foot">Copyright © 2014 todolist.cn clear</div>
            </div>
        )

    }


}

export default About